<template>
	<!-- <view class="status_bar">
	</view> -->
	<view class="container">
		<tui-navigation-bar splitLine :zIndex="99999" :init="initNavigation" @change="opacityChange" :scrollTop="scrollTop" title="" backgroundColor="#fff" color="#333">
			<image v-if="opacity > 0.85" class="tui-header-icon" :style="{ marginTop: ((systemInfo.statusBarHeight || 20) + 4) + 'px' }" src="https://static.wddzq.com/static/logo_black_v2.png"></image>
		</tui-navigation-bar>
		<u-swiper
			v-if="swiperList.length >= 1"
			:list="swiperList"
			keyName="bannerPic"
			:height="644"
			imgMode="widthFix"
			@click="handleSwiperClick"
			indicatorMode="dot"
			:interval="5000"
			indicatorActiveColor="#FFB803"
			indicatorStyle="bottom: 150rpx"
			:indicator="true"
		></u-swiper>
		<u-swiper
			v-else
			:list="swiperList"
			keyName="bannerPic"
			:height="644"
			imgMode="widthFix"
			@click="handleSwiperClick"
			indicatorMode="dot"
			:interval="5000"
			indicatorActiveColor="#FFB803"
		></u-swiper>

		<!--header-->
		<u-sticky v-if="stickyTop <= 0" :offsetTop="stickyTop" :zIndex="9999">
			<view class="header-container">
				<scroll-view style="display: flex;height: 80rpx;" scroll-x="true" :scroll-with-animation="true" :enable-flex="true">
					<view class="tab-container">
						<view class="tab-item" v-for="(item, index) in categoryList" @click="handleTabsChange(item)" :class="filterData.activityCategoryId === item.id ? 'active' : ''" :key="item.id">
							<image v-if="item.iconPic" :src="item.iconPic"></image>
							<text class="tab-item-text">{{item.name}}</text>
						</view>
					</view>
				</scroll-view>
				<view class="tui-header">
					<view class="tui-header-top">
						<view class="tui-sort-dropdown" v-if="dropShow">
							<view class="tui-drop-item" :class="[filterData.sort === index ?'active':'']" v-for="(item,index) in sortData" :key="index"
							 @click="handleSortClick" :data-index="index">
								<text class="tui-ml tui-middle">{{item.name}}</text>
							</view>
						</view>
						<view class="tui-top-item" @click="handleSort">
							<text class="tui-bold" :class="dropShow ? 'active' : ''">智能排序</text>
							<tui-icon class="tui-top-icon" name="turningdown" :size="20" :color="dropShow ? '#ffb803' : '#333'" :bold="true"></tui-icon>
						</view>
						<view class="tui-top-item tui-screen" :class="dropShow ? 'active' : ''" @click="handleDateClick">
							<text class="tui-bold">全部时间</text>
							<tui-icon name="turningdown" class="tui-top-icon" :size="20" color="#333" :bold="true"></tui-icon>
						</view>
						<view class="tui-top-item tui-screen" @tap="handleCity">
							<text class="tui-bold">{{ filterData.cityName }}</text>
							<tui-icon name="turningdown" class="tui-top-icon" :size="20" color="#333" :bold="true"></tui-icon>
						</view>
					</view>
				</view>
			</view>
		</u-sticky>
		<u-sticky v-else :offsetTop="stickyTop" :zIndex="9999">
			<view class="header-container">
				<scroll-view style="display: flex;height: 80rpx;" scroll-x="true" :scroll-with-animation="true" :enable-flex="true">
					<view class="tab-container">
						<view class="tab-item" v-for="(item, index) in categoryList" @click="handleTabsChange(item)" :class="filterData.activityCategoryId === item.id ? 'active' : ''" :key="item.id">
							<image v-if="item.iconPic" :src="item.iconPic"></image>
							<text class="tab-item-text">{{item.name}}</text>
						</view>
					</view>
				</scroll-view>
				<view class="tui-header">
					<view class="tui-header-top">
						<view class="tui-sort-dropdown" v-if="dropShow">
							<view class="tui-drop-item" :class="[filterData.sort === index ?'active':'']" v-for="(item,index) in sortData" :key="index"
							 @click="handleSortClick" :data-index="index">
								<text class="tui-ml tui-middle">{{item.name}}</text>
							</view>
						</view>
						<view class="tui-top-item" @click="handleSort">
							<text class="tui-bold" :class="dropShow ? 'active' : ''">智能排序</text>
							<image src="https://static.wddzq.com/static/xiala_select.png" style="width: 40rpx;height: 40rpx;"></image>
							<!-- <tui-icon class="tui-top-icon" name="turningdown" :size="20" :color="dropShow ? '#ffb803' : '#333'" :bold="true"></tui-icon> -->
						</view>
						<view class="tui-top-item tui-screen" :class="dropShow ? 'active' : ''" @click="handleDateClick">
							<text class="tui-bold">全部时间</text>
							<image src="https://static.wddzq.com/static/xiala_select.png" style="width: 40rpx;height: 40rpx;"></image>
							<!-- <tui-icon name="turningdown" class="tui-top-icon" :size="20" color="#333" :bold="true"></tui-icon> -->
						</view>
						<view class="tui-top-item tui-screen" @tap="handleCity">
							<text class="tui-bold">{{ filterData.cityName }}</text>
							<image src="https://static.wddzq.com/static/xiala_select.png" style="width: 40rpx;height: 40rpx;"></image>
							<!-- <tui-icon name="turningdown" class="tui-top-icon" :size="20" color="#333" :bold="true"></tui-icon> -->
						</view>
					</view>
				</view>
			</view>
		</u-sticky>
		<!--header-->
		<view class="tui-sort-mask" v-if="dropShow" @click="handleSortClose"></view>

		<!--header 顶部下拉选择框-->
		<!-- <tui-top-dropdown :show="dropShow" @close="handleSortClose">
			<view :style="{ height: (stickyTop + 200) + 'rpx', backgroundColor: '#fff' }"></view>
			<scroll-view class="tui-scroll-box" scroll-y scroll-with-animation :scroll-top="scrollTop">
				<view class="tui-drop-item" :class="[filterData.sort === index ?'active':'']" v-for="(item,index) in sortData" :key="index"
				 @tap.stop="handleSortClick" :data-index="index">
					<text class="tui-ml tui-middle">{{item.name}}</text>
				</view>
			</scroll-view>
		</tui-top-dropdown> -->
		<!--header 顶部下拉选择框-->

		<!-- 日期弹窗 -->
		<u-popup :show="showDate" mode="top" :round="18" @close="closeDate" @open="openDate" :zIndex="100000">
			<view style="padding-top: 120rpx;padding-bottom: 50rpx;">
				<!-- <view class="date-list">
					<view class="date-item">本周末</view>
					<view class="date-item">一周内</view>
					<view class="date-item">一月内</view>
				</view> -->
				<tui-calendar activeBgColor="#FFB803" activeColor="#fff" rangeBgColor="rgba(255, 184, 3, .2)" :type="2" :minDate="minDate" maxDate="2099-12-01" @change="handleDateChange"></tui-calendar>
			</view>
		</u-popup>

		<!-- 城市弹窗 -->
		<u-popup :show="showCity" closeOnClickOverlay :customStyle="{ height: ((systemInfo?.screenHeight || 300) - 200) + 'px' }" mode="bottom" :round="18" @close="closeCity" @open="openCity" :zIndex="1000000">
				<!-- <u-index-list :index-list="cityList" height="100%">
					<template v-for="(item, index) in cityArr">
						<u-index-item>
							<u-index-anchor :text="cityList[index]" :height="80" bgColor="#fff" size="36"></u-index-anchor>
							<view class="list-cell" v-for="(cell, i) in item" :data-item="cell" @click="handleCitySelect">
								{{cell.cityName || '-'}}
							</view>
						</u-index-item>
					</template>
				</u-index-list> -->
				<view style="border-top-left-radius: 18rpx;border-top-right-radius: 18rpx;overflow: hidden;">
					<view style="height: 40px;display: flex;align-items: center;justify-content: center;">
						<text style="font-size: 28rpx;color: #333;">选择城市</text>
					</view>
					<view class="u-index-list" style="padding: 0 112rpx 0 24rpx;position: relative;">
						<view style="position: absolute;right: 18rpx;top: 20rpx;z-index: 500;padding: 10rpx 0;background-color: #f2f2f2;width: 34rpx;border-radius: 17rpx;">
							<view style="font-size: 20rpx;color: #333;text-align: center;margin-bottom: 10rpx;" v-for="item in cityList">{{item.letter}}</view>
						</view>
						<view style="height: 80rpx;background-color: #f2f2f2;border-radius: 20px;padding: 0 30rpx;">
							<u--input border="none" customStyle="height: 80rpx;" fontSize="24" placeholder="搜索城市" :value="searchValue" @input="handleSearchCityChange"></u--input>
						</view>
						<scroll-view
							:offset-accuracy="1"
							:style="{
								height: ((systemInfo?.screenHeight || 300) - 200) + 'px'
							}"
							scroll-y
							@scroll="scrollHandler"
							ref="uList"
						>
							<template>
								<view v-for="(item, index) in cityListSearch" :key="index">
									<view style="font-weight: bold;font-size: 28rpx;color: #333;padding: 24rpx 0;border-bottom: 1rpx solid #DDDDDD;">{{ item.letter }}</view>
									<!-- <u-index-anchor :text="cityList[index]" :height="80" bgColor="#fff" size="36"></u-index-anchor> -->
									<view class="list-cell" v-for="(cell, i) in item.data" :data-item="cell" @click="handleCitySelect">
										{{cell.cityName || '-'}}
									</view>
								</view>
							</template>
						</scroll-view>
					</view>
				</view>
		</u-popup>

		<!-- 活动列表 -->
		<view class="active-list">
			<view class="empty" v-if="activityList.length === 0">
				<image class="empty-img" src="https://static.wddzq.com/static/kong.png"></image>
				<view class="empty-text">暂无数据～</view>
			</view>
			<view class="active-list-item" v-for="(item, index) in activityList" :key="item.id" :class=" item.officeUser && item.coverPic ? 'active-spec' : ''" @click="handleApply(item.id)">
				<image class="active-cover" v-if="item.officeUser && item.coverPic" :src="item.coverPic"></image>
				<image class="active-cover-img" v-else mode="widthFix" src="https://static.wddzq.com/static/part_bg.png"></image>
				
				<view class="active-tag" v-if="item.status === 10 ">活动中</view>
				<view class="active-tag active" v-if="item.status === 20 ">已截止</view>
				<view class="active-tag active" v-if="item.status === 30 ">已截止</view>
				<view class="active-tag active" v-if="item.status === 40 ">已结束</view>
				<view class="active-tag active" v-if="item.status === 50 ">已取消</view>
				<view class="active-item-top">
					<image class="active-item-header" mode="aspectFill" :src="item.picFirst"></image>
					<view class="active-item-right">
						<view class="active-item-right-text">
							<view>{{item.title}}</view>
							<text class="active-item-right-text-unit" v-if="item.chargeType===1">¥</text><text class="active-item-right-text-price">{{item.priceShow}}</text>
						</view>
						<view>
							<tui-tag style="margin-right: 12rpx;" backgroundColor="#FFFFE6" color="#999" shape="circle">
                <image style="width: 26rpx;height: 26rpx;margin-right: 4rpx;" :src="item.categoryIcon"></image>
                <text class="tab-item-text">{{item.categoryName}}</text>
              </tui-tag>
							<tui-tag style="margin-right: 12rpx;" backgroundColor="#FAE7DC" color="#F28C54" type="" shape="circle" v-if="item.discountType == 1">
								<image style="width: 1rpx;height: 26rpx;;"></image>
								<text class="tab-item-text">女生优惠</text>
							</tui-tag>
							<tui-tag backgroundColor="#E5F1FF" color="#0074FC" type="" shape="circle" v-if="item.payWay == 1" >
								<image style="width: 1rpx;height: 26rpx;;"></image>
								<text class="tab-item-text">线上支付</text>
							</tui-tag>
							<tui-tag backgroundColor="#E5F1FF" color="#0074FC" type="" shape="circle" v-if="item.payWay == 2" >
								<image style="width: 1rpx;height: 26rpx;;"></image>
								<text class="tab-item-text">线下收费</text>
							</tui-tag>
						</view>
						<view class="active-addr">
							<tui-icon name="gps" size="12" :color="item.officeUser && item.coverPic ? '#fff' : '#666'"></tui-icon>
							<text v-if="item.distanceShow">&nbsp;{{item.distanceShow}} &nbsp;|&nbsp;</text>
							<view>&nbsp;{{item.locationName}}</view>
						</view>
						<view class="active-time">
							<tui-icon name="time" size="12" :color="item.officeUser && item.coverPic ? '#fff' : '#666'"></tui-icon>
							<text>&nbsp;{{item.dateShow}}</text>
						</view>
            <view class="active-shop">
              <image :src="item.userHeadPic"></image>&nbsp;
              <text>{{ item.userName }}</text>
            </view>
					</view>
				</view>
				<view class="active-item-btm">
					<tui-image-group :imageList="item.imageList || []" isGroup distance="-20" borderWidth="2rpx" borderColor="#fff" width="60rpx" height="60rpx"></tui-image-group>&nbsp;
					<text class="active-item-bm-text" v-if="item.status === 10">报名中 {{item.signUpCount}}&nbsp;/</text>
					<text class="active-item-bm-text" v-if="item.status !== 10">已报名 {{item.signUpCount}}&nbsp;/</text>
					<text class="active-item-bm-text-color">{{item.maxSignUpCount}}</text>
					<view style="flex: 1;display: flex;justify-content: flex-end;"><u-button customStyle="width: 200rpx;height: 72rpx;border-radius: 44rpx;margin: 0;" color="#1c1c1e" text="去报名"></u-button></view>
				</view>
			</view>
		</view>
	</view>
	<tui-ctabbar :current="1" :refresh="refresh"></tui-ctabbar>
	<!-- <tui-tabbar :tabBar="tabBarList" :current="tabberCurrent" selectedColor="#1c1c1e" backgroundColor="#fff" backdropFilter="true" unlined="true" @click="handleTabbarClick"></tui-tabbar> -->
</template>

<script>
	import { login, getBannerList, getActivityCategoryList, getActivityPartPage,  getCityViewVoList, getUserInfo, getAppLocationVo } from '../../config/api.js';
	import { to, getSystemInfo, pxToRpx, isLogin } from '../../config/utils.js';

	export default {
		data() {
			return {
				refresh: 0,
				systemInfo: '',
				loading: false,
				hasMore: true,
				current: 0,
				opacity: 0,
				top: 0,
				scrollTop: 0,
				initNavigation: {
					opacity: 1
				},
				stickyTop: 0,
				swiperList: [],
				categoryList: [
					{
						id: null,
						name: '全部'
					}
				],
				activityList: [],
				filterData: {
					pages: 1,
					size: 20,
					activityCategoryId: null,
					activityType: '1',
					cityCode: 350200,
					cityName: '厦门市',
					sortType: '1',
				},
				// 日期弹窗
				showDate: false,
				// 城市弹窗
				showCity: false,
				// 城市数据
				cityList: [],
				cityListSearch: [],
				// cityArr: [
				// 	[{
				// 		cityCode: 350200,
				// 		cityName: '厦门市'
				// 	}],
				// ],
				// 智能排序下拉
				dropShow: false,
				// 智能排序下拉数据
				sortData: [
					{
						name: '智能排序',
						value: 1
					},
					{
						name: '报名人数',
						value: 2
					},
					{
						name: '价格由低到高',
						value: 3
					},
				],
				imageList: [
				],
				tabberCurrent: 0,
				// 发活动
				showCreate: false,

				minDate: '',

				searchValue: '',
			}
		},
		onReachBottom() {

			if(this.loading || !this.hasMore) return;
			this.filterData = {
				...this.filterData,
				pages: this.filterData.pages + 1
			};
			this.fetchActivityNormalPage(this.filterData);
		},
		onShareAppMessage() {
			return {
				title: '万事皆可组局！',
			  path: `/pages/party/party`,
				imageUrl: 'https://static.wddzq.com/static/guanfang_share.jpg'
			};
		},
		onShow() {
			this.refresh = Math.random();
      this.current = 0;
      this.resetActiveList();
			this.fetchUserInfo();
		},
		onReady() {
      let that = this;
      uni.getSetting({
        success(res) {
          if (!res.authSetting['scope.userLocation']) {
            uni.authorize({
              scope: 'scope.userLocation',
              success () {
                uni.getLocation({
                  type: 'wgs84',
                  success: function (res) {
                    let LNGLAT = res.longitude + "," + res.latitude;
                    uni.$u.http.setConfig((config) => {
                    	config.header = {
												...(config.header || {}),
												LNGLAT: LNGLAT
                    	};
                    	return config
                    })
                    uni.setStorageSync({
                      key:"LNGLAT",
                      data: LNGLAT
                    })
                    that.getLocationData();
                  },
                  fail: function(e) {
                    console.log(e);
                  }
                });
              }
            })
          } else {
            uni.getLocation({
              type: 'wgs84',
              success: function (res) {
                let LNGLAT = res.longitude + "," + res.latitude;
                uni.$u.http.setConfig((config) => {
                	config.header = {
										...(config.header || {}),
										LNGLAT: LNGLAT
                	};
                	return config
                })
                uni.setStorage({
                  key:"LNGLAT",
                  data: LNGLAT
                })
                that.getLocationData();
              },
              fail: function(e) {
                console.log(e);
              }
            });
          }
        }
      })

			let date = new Date();
			this.minDate = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();

			this.calcStickyTop();
			this.fetchBanner();
			this.fetchActivityCategoryList();
			this.fetchCityViewVoList();

			this.systemInfo = getSystemInfo();
			console.log(this.systemInfo);
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			// if(!this.dropShow) return;
			// 关闭条件
			// this.dropShow = false;
		},
		onPullDownRefresh() {
			// if(!this.hasMore) return;
			this.resetActiveList();
		},

		methods: {
			handleSearchCityChange(value) {
				this.searchValue = value;

				let cityListSearch = this.cityList.map(item => {
					let { data, letter } = item;
					let _data = (data || []).filter(it => it.cityName.indexOf(this.searchValue) > -1) || [];

					return {
						letter,
						data: _data
					};
				})
				this.cityListSearch = cityListSearch.filter(item => item.data.length > 0);
			},
			// 计算吸顶距离
			calcStickyTop() {
				let system = getSystemInfo();
				let top = pxToRpx(44 + system.statusBarHeight);
				this.stickyTop = top;
				return top;
			},
			scrollHandler() {},
			handleSwiperClick(index) {
				let current = this.swiperList[index];
				if(!current) return;
				if(current.actionType === 1) {
					current.actionUrl && uni.navigateTo({
						url: current.actionUrl
					})
				} else if(current.actionType === 2) {
					current.actionUrl && uni.navigateTo({
						url: `/pages/webview/webview?url=` + encodeURIComponent(`${current.actionUrl}`)
					})
				}
			},
			opacityChange({ opacity }) {
				this.opacity = opacity;
			},
			closeDate() {
				this.showDate = false;
			},
			openDate() {
				this.showDate = true;
				this.dropShow = false;
				this.showCity = false;
			},
			closeCity() {
				this.showCity = false;
			},
			openCity() {
				this.showCity = true;
				this.showDate = false;
				this.dropShow = false;
			},
			// handleCityChange(index) {
			// 	console.log(index);
			// 	this.showCity = false;
			// },
			// 排序点击事件
			handleSort() {
				this.dropShow = !this.dropShow;
				if(this.dropShow) {
					this.showCity = false;
					this.showDate = false;
				}
				if(this.dropShow) {
					uni.pageScrollTo({
						scrollTop: this.stickyTop + pxToRpx(12)
					})
				}
			},
			handleSortClose() {
				this.dropShow = false;
			},
			handleSortClick(e) {
				const { currentTarget } = e || {};
				const { dataset } = currentTarget || {};
				this.filterData = {
					...this.filterData,
					sort: dataset.index
				};
				this.handleSortClose();
				this.resetActiveList();
			},
			// 日期点击事件
			handleDateClick() {
				this.showDate = !this.showDate;
			},
			handleDateChange(e) {
				console.log(e);
				const { startDate, endDate } = e;
				let start = new Date(startDate), end = new Date(endDate);
				let startStr = start.getFullYear() + '/' + (start.getMonth() + 1) + '/' + start.getDate();
				let endStr = end.getFullYear() + '/' + (end.getMonth() + 1) + '/' + end.getDate();
				const _startDate = new Date(startDate + ' 00:00:00').getTime();
				const _endDate = new Date(endDate + ' 23:59:59').getTime();
				console.log(startStr, endStr);
				this.filterData = {
					...this.filterData,
					startDate: _startDate,
					endDate: _endDate
				};
				this.showDate = false;
				this.resetActiveList();
			},

			handleTabsChange(data) {
				const { id } = data || {};
				this.filterData = {
					...this.filterData,
					activityCategoryId: id
				};
				this.resetActiveList();
			},
			handleCity() {
				this.showCity = true;
			},
			handleCitySelect(e) {
				const { cityCode, cityName } = e.currentTarget?.dataset?.item || {};
				this.filterData = {
					...this.filterData,
					cityCode,
					cityName,
				};
				this.showCity = false;
				this.resetActiveList();
			},
			handleTabbarClick(data) {
				console.log(data);
				this.tabberCurrent = data.index;
				if(data.index === 2) {
					this.showCreate = true;
				}
			},
			handleApply(activityId) {
				// console.log(e);
				// const { activityId } = e.currentTarget?.dataset || {};
				uni.navigateTo({
					url: `/pages/detail/detail?activityId=${activityId}`
				})
			},
			async getLocationData() {
				let [cityErr, cityData] = await to(getAppLocationVo());
				if(cityErr) {
					return uni.showToast({
						title: cityErr.msg || '获取定位城市code失败'
					})
				}
				if(cityData?.success && cityData?.data) {
					this.filterData = {
						...this.filterData,
						cityCode: cityData.data?.codeCity,
						cityName: cityData.data?.nameCity,
					};
					this.resetActiveList();
				}
			},
			// 重新请求接口
			resetActiveList() {
				let params = {
					...this.filterData,
					pages: 1,
				};
				this.loading = false;
				this.hasMore = true;
				// this.activityList = [];
				this.fetchActivityNormalPage(params, true);
			},
			async fetchBanner() {
				const [err, banner] = await to(getBannerList({ position: '2' }));
				if(err) return;
				this.swiperList = banner?.data || [];
			},
			async fetchActivityCategoryList() {
				const [err, activityCategory] = await to(getActivityCategoryList());
				if(err) return;
				this.categoryList = [
					...this.categoryList,
					...(activityCategory?.data || [])
				];
			},
			async fetchActivityNormalPage(params, isClear) {
				this.loading = true;
				params.current = params.pages;
				const [err, activityListData] = await to(getActivityPartPage(params));
				uni.stopPullDownRefresh();
				this.loading = false;
				if(err) return;
				let records = activityListData?.data?.records || [];

        records = records.map(item => {
          item.imageList = item.userSignUpVoList?.map(item => item.headPic) || [];
          return item;
        })

				if(records.length < this.filterData.size) {
					this.hasMore = false;
				}
				this.activityList = isClear ? records : this.activityList.concat(records);
			},
			async fetchCityViewVoList() {
				const [err, cityData] = await to(getCityViewVoList());
				if(err) return;
				// let cityList = [], cityArr = [];
				// (cityData?.data || []).forEach(city => {
				// 	cityList.push(city.cityFirstLetter || '-');
				// 	cityArr.push(city.cityVoList || []);
				// })
				// this.cityList = cityList;
				// this.cityArr = cityArr;
				let cityList = [];
				(cityData?.data || []).forEach(city => {
					let data = city.cityVoList || []; //?.map(item => ({ id: item.cityCode, name: item.cityName })) || []
					cityList.push({
						letter: city.cityFirstLetter || '-',
						data: data
					})
				})
				this.cityList = cityList;
				this.cityListSearch = cityList;
			},
			async fetchUserInfo() {
				if(isLogin()) {
					const [err, userInfo] = await to(getUserInfo());
					if(err) return;
					if(userInfo.success && userInfo.data) {
						uni.setStorage({
							key: 'userInfo',
							data: JSON.stringify(userInfo.data)
						})
					}
				}
			}
		}
	}
</script>

<style>
	.tab-container {
		display: flex;
		position: relative;
		z-index: 1000;
	}
	.tab-item {
		/* width: 200rpx; */
		width: 150rpx;
		/* padding: 0 20rpx; */
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}
	.tab-item.active::after {
		position: absolute;
		content: ' ';
		left: 37rpx;
		bottom: 20rpx;
		width: 76rpx;
		height: 12rpx;
		background-color: #FFB803;
		z-index: 99;
		border-radius: 3rpx;
	}
	.tab-item image {
		width: 44rpx;
		height: 44rpx;
		margin-right: 4rpx;
		position: relative;
		z-index: 100;
	}
	.tab-item .tab-item-text {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		position: relative;
		z-index: 100;
	}

	/* 隐藏scroll-view滚动条*/
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	/*header*/
	.header-container {
		margin-top: -120rpx;
		background-color: #fff;
		border-top-left-radius: 18rpx;
		border-top-right-radius: 18rpx;
		position: relative;
		z-index: 100000000;
		/* padding: 24rpx 36rpx; */
		padding: 24rpx 0;

	}
	.tui-header-icon {
		width: 120rpx;
		height: 32px;
		position: fixed;
		top: 0;
		left: 20rpx;
		padding: 0 12rpx;
		display: flex;
		align-items: center;
		transform: translateZ(0);
		z-index: 99999;
		box-sizing: border-box;
		animation: fade-in .5s ease;
	}
	.tui-header {
		width: 100%;
		height: 64rpx;
		box-sizing: border-box;
		background-color: #fff;
		position: relative;
		z-index: 100000;
	}

	.tui-header-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
		color: #333;
		height: 64rpx;
		position: relative;
	}

	.tui-sort-dropdown {
		position: absolute;
		top: 64rpx;
		left: 0;
		z-index: 10000;
		width: 100%;
		background-color: #fff;
		border-bottom-left-radius: 18rpx;
		border-bottom-right-radius: 18rpx;
		animation: fade-in .3s ease;
		animation: fade-Y .3s ease;
	}
	@keyframes fade-in {
	  from {
	    opacity: 0;
	  }
	  to {
	    opacity: 1;
	  }
	}

	@keyframes fade-Y {
	  from {
			top: 20rpx;
	  }
	  to {
			top: 64rpx;
	  }
	}


	.tui-sort-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .5);
		z-index: 9998;
	}

	.tui-top-item {
		height: 26rpx;
		line-height: 26rpx;
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-top-item .tui-bold.active {
		color: #ffb803;
	}
	.tui-top-icon {
		padding-top: 10rpx;
	}

	/* 日期 */
	.date-list {
		display: flex;
	}
	.date-item {
		width: 224rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #1c1c1e;
		background-color: #f2f2f2;
		border-radius: 35rpx;
		margin-right: 22rpx;
	}

	/* 智能排序下拉样式 */
	.tui-scroll-box {
		background-color: #fff;
	}

	.tui-drop-item {
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #000;
	}
	.tui-drop-item.active {
		color: #ffb803;
	}
	/*header*/

	/* 城市列表 */
	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}
	/* 城市列表 */

	/* 活动列表 */
	.active-list {
		padding-top: 20rpx;
		margin: 0 24rpx;
	}
	.active-list-item {
		padding: 44rpx 6rpx 30rpx 6rpx;
		border-radius: 18rpx;
		background-color: #fff;
		overflow: hidden;
		margin-bottom: 18rpx;
		overflow: hidden;
		position: relative;
	}
	.active-cover, .active-cover-img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 9;
	}
	.active-cover-img {
		height: auto;
	}
	.active-spec {
		background-color: #96AE64;
	}

	.active-tag {
		width: 90rpx;
		height: 40rpx;
		border-bottom-right-radius: 18rpx;
		background-color: #3BFBAA;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #000;
		top: 0;
		left: 0;
		position: absolute;
		z-index: 10;
	}
	.active-tag.active {
		color: #aaa;
		background-color: #f2f2f2;
	}

	.active-item-top {
		/* display: flex; */
		position: relative;
		z-index: 10;
		margin: 0 18rpx;
	}
	.active-item-header {
		position: absolute;
		top: 0;
		left: 0;
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;
	}
	.active-item-right {
		flex: 1;
		margin-left: 218rpx;
	}
	.active-item-right-text {
		font-size: 32rpx;
		/* margin-bottom: 12rpx; */
		display: flex;
		justify-content: space-between;
	}
	.active-item-right-text view {
		flex: 1;
		color: #000;
	}
	.active-spec .active-item-right-text view {
		color: #fff;
	}
	.active-item-right-text-unit {
		font-size: 28rpx;
		color: #FFB803;
		font-weight: bold;
		margin-top: 10rpx
	}
	.active-item-right-text-price {
		font-size: 36rpx;
		color: #FFB803;
		font-weight: bold;
	}
	.active-addr {
		margin-top: 12rpx;
		margin-bottom: 12rpx;
	}

	.active-addr, .active-time, .active-shop {
		font-size: 24rpx;
		color: #666;
		display: flex;
		align-items: center;
	}
	.active-spec .active-addr, .active-spec .active-time, .active-spec .active-shop {
		color: #fff;
	}

	.active-addr view {
		flex: 1;
		height: 40rpx;
		margin-top: 6rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.active-shop {
		margin-top: 22rpx;
		margin-bottom: 26rpx;
	}
	.active-shop image {
		width: 32rpx;
		height: 32rpx;
		border-radius: 16rpx;
	}
	.active-shop text {}

	.active-item-btm {
		display: flex;
		align-items: center;
		border-top: 1rpx solid #f2f2f2;
		/* padding-top: 22rpx; */
		position: relative;
		z-index: 10;
		/* background-color: #FBF3EF; */
		/* border-radius: 18rpx; */
		padding: 26rpx 18rpx 2rpx 18rpx;
	}
	.active-spec .active-item-bm {
		color: #fff;
	}
	.active-item-bm {
		flex: 1;
		padding-left: 12rpx;
		font-size: 28rpx;
		color: #FFB803;
	}
	.active-item-bm-text {
		font-size: 28rpx;
		color: #FFB803;
		padding-right: 6rpx;
	}
	.active-item-bm-text-color {
		font-size: 28rpx;
		color: #333;
	}

	.active-spec .active-item-bm-text-color, .active-spec .active-item-bm-text {
		color: #fff;
	}

</style>
